import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import { Modal, message } from 'antd';
import FilterBar from './FilterBar/FilterBar';
import NewsPreview from '@/components/NewsPreview/NewsPreview'
import RejectReasonConfirm from '@/components/RejectReasonConfirm/RejectReasonConfirm'
import UnSettledTable from './UnSettledTable/UnSettledTable'

import http from '../../../../common/http';

@inject('rootStore') @observer
class Settled extends Component {
  @observable showPreviewModal = false;
  @observable newsListDetails = {};
  @observable selectedRowsLength = 0;
  @observable selectedRowKeys = [];
  @observable categoryStatus: false;
  @observable previewId = 0;
  @observable showRejectReasonModal = false;
  @observable rejectReasonValue = '';
  @observable rejectId = 0;

  toPreview = (record) => {
    this.previewId = record.id
    this.newsListDetails = record;
    this.showPreviewModal = true
  }

  pageOnChange = (pageNumber, pageSize) => {
    const contributionStore = this.props.rootStore.contributionStore;

    contributionStore.toChangePageNumber(pageNumber)
  }

  pageSizeOnChange = (current, pageSize) => {
    const contributionStore = this.props.rootStore.contributionStore;

    contributionStore.toChangePageSize(pageSize)
  }

  selectedRowsLengthChange = (length) => {
    this.selectedRowsLength = length
  }

  clearChooseTips = () => {
    this.selectedRowKeys = []
    this.selectedRowsLength = 0;
  }

  confrimReject = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    const param = {
      ids: this.rejectId,
      content: this.rejectReasonValue
    }

    http.post('/contributeBoss/reject', param)
    .then((response) => {
      if (response.success) {
        message.success('Success');
        this.cancelReject();
        contributionStore.toGetContributionList();
      }
    })
  }

  cancelReject = () => {
    this.showRejectReasonModal = false;
    this.rejectReasonValue = '';
  }

  rejectReasonValueOnChange = (e) => {
    this.rejectReasonValue = e.target.value
  }

  newsPrevieCancel = () => {
    this.showPreviewModal = false
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const selectedRowKeys = this.selectedRowKeys;
    const contributionStore = this.props.rootStore.contributionStore;

    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRowsLength  = selectedRows.length;
      },
    };

    return (
      <div className="page-content mt176">
        <FilterBar
          filterBarSearch={this.props.filterBarSearch}
          titleValueOnChange={this.props.titleValueOnChange}
          titleValue={this.props.titleValue}
          timeOnChange={this.props.timeOnChange}
          timeChange={this.props.timeChange}
          timeValue={this.props.timeValue}
          filterBarReset={this.props.filterBarReset}
          categoryListFifty={this.props.categoryListFifty}
          activeItem={this.props.activeItem}
          categoryStatus={this.props.categoryStatus}
          toChangeCategoryStatus={this.props.toChangeCategoryStatus}
          toChooseCategory={(name, id) => this.props.toChooseCategory(name, id)}
        />
        <div className="list-table">
          <UnSettledTable
            toPreview={(record) => this.toPreview(record)}
            dataSource={contributionStore.contributionList}
            dataTotal={contributionStore.contributionListTotal}
            pageOnChange={this.pageOnChange}
            pageSizeOnChange={this.pageSizeOnChange}
            pageCurrent={contributionStore.contributionParam.pageIndex}
            rowSelection={rowSelection} />
          <Modal
            title="News Preview"
            width={1165}
            visible={this.showPreviewModal}
            onCancel={this.newsPrevieCancel}
            footer={null}>
            <NewsPreview newsListDetails={this.newsListDetails} />
          </Modal>
          <RejectReasonConfirm
            showRejectReasonModal={this.showRejectReasonModal}
            confrimReject={this.confrimReject}
            cancelReject={this.cancelReject}
            rejectReasonValue={this.rejectReasonValue}
            rejectReasonValueOnChange={this.rejectReasonValueOnChange} />
        </div>
      </div>
    )
  }
}

export default Settled;
